<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <title>程序猿小龙&博客</title>
    <link href="../blog/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link href="../blog/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="../blog/css/index_style.css" rel="stylesheet" type="text/css">
    <link href="../blog/css/animate.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="menu" class="hover_animation menu_open" data-mark="false">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div id="navgation" class="navgation navgation_close">
        <ul class="point">
            <li><a href="/index">首页</a></li>
            <li><a href="/article">博客</a></li>
            <li><a href="/message">留言</a></li>
            <li><a href="/diary">日志</a> </li>
        </ul>
        <div class="logo"><a>CodeLong</a></div>
    </div>
    <div class="section" id="section1">
        <div class="fp-tablecell">
            <div class="page1">
                <div class="nav wow zoomIn" data-wow-duration="2s">
                    <h1>程序猿小龙</h1>
                    <p>剑气纵横三万里,一剑光寒十九洲</p>
                    <a class="layui-btn layui-btn-normal" style="margin-top: 20px" href="/article">进入博客</a>
                </div>
                <a class="next wow fadeInUp" data-wow-duration="2s" id="next"></a>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="fp-tablecell">
            <div class="page2">
                <div class="warp-box">
                    <div class="new-article">
                        <div class="inner wow fadeInDown" data-wow-delay=".2s">
                            <h1>热门文章</h1>
                            <p>
                                心有多大，舞台就有多大！
                            </p>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp" style="padding: 0 10px">
                            <div class="single-news">
                                <div class="news-head">
                                    <img id="img0" th:src="${pathlist[0]}">
                                    <a th:href="${articlepath[0]}" class="link"><i class="fa fa-link"></i></a>
                                </div>
                                <div class="news-content">
                                    <h4>
                                        <a th:href="${articlepath[0]}" th:text="${list[0].name}"></a>
                                    </h4>
                                    <div class="date" th:text="${list[0].time}"></div>
                                    <p th:text="${list[0].tag}"></p>
                                    <a th:href="${articlepath[0]}" class="btn">
                                        阅读更多 
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp" data-wow-delay=".2s" style="padding: 0 10px">
                            <div class="single-news">
                                <div class="news-head">
                                    <img id="img1" th:src="${pathlist[1]}">
                                    <a th:href="${articlepath[1]}" class="link"><i class="fa fa-link"></i></a>
                                </div>
                                <div class="news-content">
                                    <h4>
                                        <a th:href="${articlepath[1]}" th:text="${list[1].name}"></a>
                                    </h4>
                                    <div class="date" th:text="${list[1].time}"></div>
                                    <p th:text="${list[1].tag}"></p>
                                    <a th:href="${articlepath[1]}" class="btn">
                                        阅读更多 
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp" data-wow-delay=".4s" style="padding: 0 10px">
                            <div class="single-news">
                                <div class="news-head">
                                    <img id="img2" th:src="${pathlist[2]}">
                                    <a th:href="${articlepath[2]}" class="link"><i class="fa fa-link"></i></a>
                                </div>
                                <div class="news-content">
                                    <h4>
                                        <a th:href="${articlepath[2]}" th:text="${list[2].name}"></a>
                                    </h4>
                                    <div class="date" th:text="${list[2].time}"></div>
                                    <p th:text="${list[2].tag}"></p>
                                    <a th:href="${articlepath[2]}" class="btn">
                                        阅读更多 
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section3">
        <div class="fp-tablecell">
            <div class="page3">
                <div class="warp-box">
                    <div class="warp">
                        <div class="inner">
                            <div class="links">
                                <ul>
                                    <li class="wow fadeInLeft"><a href="#">关于&我</a></li>
                                    <li class="wow fadeInRight"><a href="https://gitee.com/dhlong2019">gitee地址</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section4">
        <div class="fp-tablecell">
            <div class="page4">
                <div class="warp-box">
                    <div class="about">
                        <div class="inner">
                            <h1 class="wow fadeInLeft">程序猿小龙</h1>
                            <p class="wow fadeInRight">
                                是个爱好游戏，动漫，同时还有点头发的小小程序猿。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer wow fadeInUp" id="contact">
        <div class="footer-top" style="background-color:black;padding-bottom: 10px">
            <div class="container">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-md-offset2">
                        <div class="single-widget about">
                            <div class="footer-logo">
                                <h2>程序猿小龙</h2>
                            </div>
                            <p>剑气纵横三万里，一剑光寒十九洲。</p>
                            <div class="button">
                                <a href="#" class="btn layui-btn layui-btn-normal">About Me</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md4 layui-col-md-offset2">
                        <div class="single-widget contact">
                            <h2>联系我</h2>
                            <ul class="list">
                                <li><i class="fa fa-map"></i>地址: 广东肇庆</li>
                                <li><i class="fa fa-qq"></i>QQ: 1713874186 </li>
                                <li><i class="fa fa-envelope"></i>邮箱: 1713874186@qq.com</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="copyright" style="padding-top: 80px">
                    <div class="container">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 text-center" style="color: black;">
                                <p>Copyright &copy; 2020 程序猿小龙</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <script src="../blog/layui/layui.js"></script>
    <script src="../blog/js/wow.min.js"></script>
    <script src="../blog/js/index.js"></script>
    <script th:inline="javascript">
        layui.use('jquery',function () {
            var $=layui.$;
        })
    </script>
</body>
</html>